<template>
	<view>

		<view class='content'>
			<view class="tabsList">
				<view :class="item.id == activate ? 'activate' : ''" v-for="item in tabsList" :key="item.id"
					@click="change(item.id)">{{ item.name }}</view>
			</view>
			<view class="beizhu">
				<textarea v-model="form.content" placeholder="请输入需求信息"></textarea>
				<Uploading @change="onImgChange"></Uploading>
			</view>
			<view class="wupinguige" v-if="activate == 2">
				<view>物品规格</view>
				<view class="zhongliang">0-25KG</view>
			</view>

			<view class="address">
				<view class="fahuo" @click="show = true">
					<view class="left">
						<view class="icon">
							<text>{{ activate == 0 ? '送' : activate == 2 ? '买' : activate == 1 ? '取' : '' }}</text>
						</view>
						<view class="fasongdizhi" v-if="form.fahuo">{{ form.fahuo }}</view>
						<text v-else>请选择地址</text>
					</view>
					<view class="right">
						<u-icon name="arrow-right" color="#C4C4C4" size="28"></u-icon>
					</view>
				</view>
				<view class="shouhuo" @click="shouhuoShow = true">
					<view class="left">
						<view class="icon">
							<text>收</text>
						</view>
						<view class="fasongdizhi" v-if="form.shouhuo">{{ form.shouhuo }}</view>
						<text v-else>请选择地址</text>
					</view>
					<view class="right">
						<u-icon name="arrow-right" color="#C4C4C4" size="28"></u-icon>
					</view>
				</view>
			</view>
			<view class="wupinguige" @click="timeShow = true" v-if="activate == 0">
				<view>取货时间</view>
				<view class="zhongliang">{{ form.start_time }}></view>
			</view>
			<!-- <view class="wupinguige" v-if="activate == 2">
				<view>送达时间</view>
				<view class="zhongliang">12:00-13:00 ></view>
			</view> -->
			<!-- <view class="wupinguige" v-if="activate == 3">
				<view>送件时间</view>
				<view class="zhongliang">12:00-13:00 ></view>
			</view> -->
			<view class="commodityValue" v-if="activate == 0 || activate == 1">
				<view class="commodityValue-title">
					物品投保价值
				</view>
				<view class="commodityValue-main">
					<radio-group name="">
						<view class="contents">
							<view class="commodityValue-item" v-for="item in insureList" :key="item.id">
								<view class="commodityValue-item-left">
									<view class="">
										价值{{ item.value }}元
									</view>
									<view class="">
										￥{{ item.price }}
									</view>
								</view>
								<view class="commodityValue-item-right">
									<label @click="radioChange(item.price)">
										<radio :value="item.price" :checked="item.price == baojiaCurrent" style="transform: scale(0.6);"
											color="#F14500" />
										<text></text>
									</label>
								</view>
							</view>
						</view>
					</radio-group>
				</view>
			</view>
			<view class="price">
				<view class="price-item flexjcsb" v-if="activate == 0">
					<text>小费：</text>
					<view class="">
						<uni-number-box v-model="form.tip"></uni-number-box>
					</view>
				</view>
				<!-- <view class="price-item flexjcsb">
					<text>优惠劵：</text>
					<picker class="price-item-right">无可用优惠券 <text>></text></picker>
				</view> -->
			</view>
			<view class="popup" v-if="activate == 0">
				<view class="popup-header">
					<view class=""></view>
					<view class="ExpenseDetails">费用明细</view>
					<view class="PricingRules" @click="skipRule">计价规则</view>
				</view>
				<view class="popup-main">
					<view class="popup-main-item flexjcsb">
						<text>基础运费（3公里）</text>
						<text>1元</text>
					</view>
					<view class="popup-main-item flexjcsb">
						<text>商品保价</text>
						<text>{{ form.price }}元</text>
					</view>
					<view class="popup-main-item flexjcsb">
						<text>总费用</text>
						<text>{{ totalPrice }}元</text>
					</view>
				</view>
			</view>

			<view class="agreement">
				<view class="">
					<checkbox :checked="form.agreementFlag" @click="form.agreementFlag = !form.agreementFlag"
						style="transform: scale(0.7);" color="#F14500" />
					<text>已阅读并同意</text>
				</view>
				<text class="bang" v-if="activate == 0" @click="skipXY">《帮送服务协议》</text>
				<text class="bang" v-if="activate == 2" @click="skipXY">《帮买服务协议》</text>
				<text class="bang" v-if="activate == 1" @click="skipXY">《帮取服务协议》</text>
			</view>

		</view>
		<view class="btn">
			<view class="totalPrice">¥{{ totalPrice }}</view>
			<view class="xiadan" @click="placeAnOrder">下单</view>
		</view>

		<!-- 发货地址 -->
		<u-popup v-model="show" mode="bottom">
			<view class="popup">
				<view class="takeList">
					<view class="take" v-for="(item, index) in takeList" :key="item.id">
						<radio-group>
							<view class="takeInfo">
								<radio :value="item.id" :checked="index == fahuoCurrent" @click="radioChangeTake(index, 'fahuo')" />
								<view>{{ item.address }}</view>
							</view>
							<view class="name">
								<text>{{ item.name }}</text>
								<text>{{ item.mobile }}</text>
							</view>
						</radio-group>
					</view>
				</view>
				<view class="btn" @click="addSite">
					<text>新建地址</text>
				</view>
			</view>
		</u-popup>

		<!-- 收货地址 -->
		<u-popup v-model="shouhuoShow" mode="bottom">
			<view class="popup">
				<view class="takeList">
					<view class="take" v-for="(item, index) in takeList" :key="item.id">
						<radio-group>
							<view class="takeInfo">
								<radio :value="item.id" :checked="index == shouhuoCurrent" @click="radioChangeTake(index, 'shouhuo')" />
								<view>{{ item.address }}</view>
							</view>
							<view class="name">
								<text>{{ item.name }}</text>
								<text>{{ item.mobile }}</text>
							</view>
						</radio-group>
					</view>
				</view>
				<view class="btn" @click="addSite">
					<text>新建地址</text>
				</view>
			</view>
		</u-popup>
		<!-- 取货时间 -->
		<u-picker mode="time" v-model="timeShow" :params="params" @confirm="confirmTime"></u-picker>
	</view>
</template>

<script>
import Uploading from '@/components/Uploading/index.vue'
const $api = require('@/utils/request.js').API
export default {
	components: {
		Uploading
	},
	data() {
		return {
			// 选择时间的时分秒
			params: {
				year: false,
				month: true,
				day: true,
				hour: true,
				minute: true,
				second: false
			},
			// tabs列
			tabsList: [
				{
					name: '帮我送',
					id: 0
				},
				{
					name: '帮我买',
					id: 2
				},
				{
					name: '帮我取',
					id: 1
				},
			],
			// 投保5元 10元 20元 30元 以此类推
			insureList: [
				{ id: 1, value: '1-500', price: 5, flag: false },
				{ id: 2, value: '501-1000', price: 10, flag: false },
				{ id: 3, value: '1001-3000', price: 20, flag: false },
				{ id: 4, value: '3001-5000', price: 30, flag: false },
			],
			//收货地址列表
			takeList: [],
			// 当前tabs所在
			activate: 0,
			// 发货地址
			show: false,
			// 收货地址
			shouhuoShow: false,
			// 取货时间
			timeShow: false,

			form: {
				// 备注
				content: '',
				//发货地址
				fahuo: null,
				//发货id
				take_address_id: null,
				//收货地址
				shouhuo: null,
				// 收货id
				receiving_address_id: null,
				// 投保
				price: 0,
				// 小费
				tip: 0,
				// 时长
				time: 0,
				// 协议
				agreementFlag: true,
				// 订单类型
				order_type: 0,
				// 里程
				mileage: 0,
				// 图片
				images: [],
				// 运费	
				freight: 1,
				// 取货时间
				start_time: ''
			},

			// 发货经纬度
			fahuoPlace: {

			},
			// 收货经纬度
			shouhuoPlace: {

			},

			// 发货选中
			fahuoCurrent: null,
			// 收货选中
			shouhuoCurrent: null,
			// 保价选中
			baojiaCurrent: null
		}
	},
	onLoad(options) {
	},
	onShow() {
		this.getTakeList()
	},
	computed: {
		totalPrice() {
			return this.form.price + this.form.tip + this.form.freight
		}

	},
	methods: {
		// 获取收货列表
		getTakeList() {
			$api.postAddressList().then(res => {
				this.takeList = res.data.data.list
			})
		},
		// 切换状态栏
		change(id) {
			this.activate = id
			this.form.tip = 0
			this.form.price = 0
			this.form.freight = 1
			this.baojiaCurrent = null
		},
		// 监听上传图片
		onImgChange(list) {
			this.form.images = list
		},
		// 选择投保价值
		radioChange(price) {
			console.log(price);
			console.log(this.baojiaCurrent);

			if (price == this.baojiaCurrent) {
				this.baojiaCurrent = null
				this.form.price = 0
			} else {
				this.baojiaCurrent = price
				this.form.price = Number(price)
			}

		},
		// 选择取货时间
		confirmTime(time) {
			let { month, day, hour, minute } = time
			let strTime = `${month}月${day}日${hour}点${minute}分`
			this.form.start_time = strTime
		},
		// 勾选协议
		bindAgreement(item) {
			this.form.toubao = item.detail.value
		},
		// 切换地址
		radioChangeTake(index, type) {
			console.log(this.takeList[index]);
			let { address, house_number, id, latitude, longitude } = this.takeList[index]
			if (type == 'fahuo') {
				this.form.take_address_id = id
				this.form.fahuo = address + house_number
				this.show = false
				this.fahuoPlace = {
					latitude,
					longitude
				}
				this.fahuoCurrent = index
			}
			if (type == 'shouhuo') {
				this.form.receiving_address_id = id
				this.form.shouhuo = address + house_number
				this.shouhuoShow = false
				this.shouhuoPlace = {
					latitude,
					longitude
				}
				this.shouhuoCurrent = index
			}
			this.getDistance()
		},

		// 下单
		placeAnOrder() {
			if (!this.form.agreementFlag) {
				uni.showToast({
					title: '请阅读并同意',
					icon: 'none'
				})
				return
			}

			if (!this.form.content) {
				uni.showToast({
					title: '下单失败，请输入需求',
					icon: 'none'
				})
				return
			}
			if (!this.form.take_address_id || !this.form.receiving_address_id) {
				uni.showToast({
					title: '下单失败，请选择地址',
					icon: 'none'
				})
				return
			}
			this.form.order_type = this.activate
			$api.placeOrder(this.form).then(res => {
				$api.payPrepay({
					order_id: res.data.data.order_id,
					pay_type: 'wechatpay',
					is_matched: 0,
				}).then(res => {
					console.log(res.data.data);
					$api.postOrderGoodsPayment({
						out_trade_no: res.data.data,
						pay_type: 'wechatpay',
						is_matched: 0,
					}).then(res => {
						let obj = res.data.data.data
						this.popups = false
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: obj.timeStamp,
							nonceStr: obj.nonceStr,
							package: obj.package,
							signType: obj.signType,
							paySign: obj.paySign,
							success: function (res) {
								uni.switchTab({
									url: '/pages/Ordergoods/Ordergoods'
								})
							},
							fail: function (err) {
								uni.switchTab({
									url: '/pages/Ordergoods/Ordergoods'
								})
							}
						});
					})
				})
			}).catch(err => {
				uni.showToast({
					title: '下单失败，请检查信息是否有误',
					icon: 'none'
				})
			})
		},
		// 计价规则
		skipRule() {
			uni.navigateTo({
				url: './BillingRules'
			})
		},
		// 协议
		skipXY() {
			uni.navigateTo({
				url: '/pages_runErrands/ptAgreement/index'
			})
		},


		// 计算配送员到目的地之间的距离
		getDistance() {
			if (this.shouhuoPlace.latitude && this.fahuoPlace.latitude) {
				const earthRadius = 6371; // 地球半径（单位：千米）
				// 将经纬度转换为弧度
				const radLat1 = (Math.PI / 180) * this.shouhuoPlace.latitude;
				const radLon1 = (Math.PI / 180) * this.shouhuoPlace.longitude;
				const radLat2 = (Math.PI / 180) * this.fahuoPlace.latitude;
				const radLon2 = (Math.PI / 180) * this.fahuoPlace.longitude;

				// 差值
				const diffLat = radLat2 - radLat1;
				const diffLon = radLon2 - radLon1;

				// 根据Haversine公式计算距离
				const a = Math.sin(diffLat / 2) ** 2 + Math.cos(radLat1) * Math.cos(radLat2) * Math.sin(diffLon / 2) ** 2;
				const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
				// 计算出公里数
				this.form.mileage = earthRadius * c;
				if (this.form.mileage > 3) {
					this.form.freight = Math.ceil(this.form.mileage - 3) + 1;
				} else {
					this.form.freight = 1
				}

			}

		},
		// 新建地址
		addSite() {
			uni.navigateTo({
				url: '/pages_my/my/giveServiceTo/address'
			})
			this.show = false
			this.shouhuoShow = false
		}
	},
}
</script>

<style scoped lang='scss'>
.content {
	min-height: 100vh;
	background: #fbfbfb;
	padding-bottom: 150rpx;
}

.tabsList {
	background: #fff;
	padding: 10px 15px;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	margin-bottom: 5px;

	view {
		font-size: 28rpx;
		font-weight: 500;
		padding-bottom: 3px;

	}

	.activate {
		color: #F14500;
		border-bottom: 2px solid #F14500;
	}
}

.beizhu {
	background: #fff;
	padding: 10px 15px;
	margin-bottom: 5px;

	textarea {
		height: 180rpx;
	}

	.upload {
		width: 160rpx;
		height: 160rpx;
		border: 2px dotted #BFBFBF;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
}

.wupinguige {
	background: #fff;
	padding: 10px 15px;
	margin-bottom: 5px;
	display: flex;
	justify-content: space-between;
	font-size: 28rpx;
	font-weight: 400;
	color: #686868;
	line-height: 40rpx;

	.zhongliang {
		font-size: 28rpx;
		color: #f14600;
	}
}

.address {
	background: #fff;
	padding: 10px 15px;
	margin-bottom: 5px;

	.fahuo,
	.shouhuo {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 90rpx;

		.left {
			display: flex;
			align-items: center;

			.fasongdizhi {
				flex: 1;
			}

			text {
				color: #cecbcb;
			}

			.icon {
				width: 52rpx;
				height: 52rpx;
				background: #F9CE27;
				border-radius: 50%;
				font-size: 28rpx;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 52rpx;
				text-align: center;
				margin-right: 6px;

				text {
					width: 52rpx;
					height: 52rpx;
					color: #FFFFFF;

				}
			}
		}
	}

	.shouhuo {
		.left {
			.icon {
				background: #F14500;

			}
		}

	}


}

.commodityValue {
	background: #fff;
	padding: 10px 15px;
	margin-bottom: 5px;
	border-radius: 5rpx;

	.commodityValue-title {
		font-size: 28rpx;
		font-weight: 400;
		color: #686868;
		// padding: 27rpx 0 29rpx 28rpx;
		padding: 27rpx 0 18rpx 28rpx;
	}

	.commodityValue-main {
		width: 642rpx;
		margin: auto;

		.contents {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
		}

		.commodityValue-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 310rpx;
			height: 87rpx;
			background: #EDEDED;
			border-radius: 5rpx;
			margin-top: 11rpx;
			padding: 0 10rpx 0 18rpx;

			.commodityValue-item-left {
				view:first-child {
					font-size: 22rpx;
					font-weight: 400;
					color: #686868;
				}

				view:last-child {
					font-size: 26rpx;
					font-weight: 500;
					color: #2E2E2E;
				}
			}
		}
	}
}

.price {

	background: #fff;
	padding: 10px 15px;
	margin-bottom: 5px;

	.price-item {
		height: 80rpx;
		padding: 0 38rpx 0 24rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #686868;
		border-bottom: 5px solid #FBFBFB;

		.price-item-right {
			font-size: 28rpx;
			font-weight: 400;
			color: #717171;

			text {
				padding-left: 15rpx;
			}
		}
	}

	.price-item:last-child {
		border: none;
	}
}

.popup {
	background: #fff;

	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;

		view {
			width: 250rpx;
		}

		.ExpenseDetails {
			font-size: 30rpx;
			font-weight: 500;
			color: #313131;
			text-align: center;
			padding: 25rpx 0 33rpx 0;
		}

		.PricingRules {
			text-align: right;
			font-size: 24rpx;
			font-weight: 400;
			color: #F14500;
			padding-right: 36rpx;
		}
	}

	.popup-main {
		width: 666rpx;
		margin: auto;

		.popup-main-item {
			padding: 10rpx 0;
		}

		.popup-main-item:last-child {
			padding-bottom: 30rpx;
		}
	}
}

.agreement {
	display: flex;
	align-items: center;
	width: 702rpx;
	height: 50rpx;
	line-height: 50rpx;
	margin: auto;
	margin-top: 20rpx;

	text {
		font-size: 28rpx;
		font-weight: 400;
		color: #000000;
	}

	.bang {
		color: #F14500;
	}
}

.btn {
	position: fixed;
	bottom: 0px;
	left: 15px;
	right: 15px;
	margin: 15px;
	height: 98rpx;
	border-radius: 49rpx;
	display: flex;
	align-items: center;
	font-weight: 500;
	color: #FFFFFF;
	overflow: hidden;
	line-height: 98rpx;

	.totalPrice {
		flex: 5;
		background: #5d5d5d;
		height: 98rpx;
		padding-left: 40rpx;
	}

	.xiadan {
		flex: 2;
		background: #F14500;
		height: 98rpx;
		text-align: center;

	}
}

.popup {
	position: relative;

	.takeList {
		min-height: 300px;
		padding-bottom: 150rpx;

		.take {
			padding: 15px;

			.takeInfo {
				display: flex;
				align-items: center;


			}

			.name {
				margin-left: 30px;
				margin-top: 4px;
				color: #717171;
			}
		}
	}

	.btn {
		left: 30rpx;
		right: 30rpx;
		position: absolute;
		bottom: 20px;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background: #f14500;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
</style>
